<template>
  <div class="app">
    <h1>我是App组件</h1>
    <h2>n放大10倍后：{{n*10}}</h2>
    <h2>n放大10倍后：{{n2}}</h2>
    <h2>n放大10倍后：{{getn()}}</h2>
    <h2>n放大10倍后：{{n | big(100) | half}}</h2>
    <br>
    <Child/>
  </div>
</template>

<script>
  import Child from './components/Child.vue'

  export default {
    name:'App',
    components:{Child},
    data() {
      return {
        n:6,
      }
    },
    computed:{
      n2(){
        return this.n * 10
      }
    },
    methods: {
      getn(){
        return this.n * 10
      }
    },
    filters:{
      /* 
        1.big何时调用？—— 有人使用big这个过滤器的时候
        2.big收到哪些参数？—— 使用过滤器时，传递的值
        3.big中的this是谁？—— 爱谁谁，总之不是vm，也不是vc，总之我们不用this
      */
      /* big(value,n){
        console.log('big调用了',value,n)
        return value * n
      }, */
      half(value){
        return value/2
      }
    }
  }
</script>

<style>
  .app {
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px black;
  }
</style>